<template>
  <el-container style="height: 100%; overflow: hidden" class="ele-scrollbar">
    <el-header class="header">
      <img class="logo" src="../assets/logo.png" />
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="pregrabcase">待抢案列表</el-menu-item>
        <el-menu-item index="grabresult">抢案结果查询</el-menu-item>
      </el-menu>
    </el-header>
    <el-container style="height: 100%">
      <el-main class="ele-scrollbar">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import "@/assets/css/scrollbar.css";
const axios = require("axios");
export default {
  name: "layout",
  data() {
    return {
      activeIndex: "pregrabcase",
      name: "",
      arr: [],
    };
  },
  mounted() {
    this.check()
  },
  methods: {
    check() {
      if (!localStorage.getItem("pwd")) {
        this.$message.error("请重新登录!");
        this.$router.push("/");
      }
    },
    handleSelect(path) {
      this.activeIndex = path;
      this.$router.push("/" + path);
    },
  },
};
</script>

<style>
.el-header {
  background-color: rgb(84, 92, 100);
  padding: 0px;
}

.el-main {
  background-color: aliceblue;
}

.header {
  display: flex;
  flex-direction: row;
}

.logo {
  width: 60px;
  height: 60px;
  padding-left: 20px;
  padding-right: 20px;
}
</style>
